<template>
  <div class="layout-body">
    <el-image src="//22159555.s21i.faiusr.com/4/ABUIABAEGAAg76WC8wUo8uPMiwYwgA84rAI.png.webp"/>
    <h1>我们的服务</h1>
    <p>多年以来，优逸云为众多企业与用户提供了专业的一站式服务，只为助力企业成长</p>
    <div class="layout-coder">
      <el-card id="card-a">
        <img class="layout-coder-img" src="../../assets/imgs/touming.png"/>
        <div class="layout-coder-div">
          <span class="span-a">数字信息化规划</span>
          <hr/>
          <span class="span-b">企业信息化蓝图设计</span>
        </div>
      </el-card>
      <el-card id="card-b">
        <img class="layout-coder-img" src="../../assets/imgs/touming.png"/>
        <div class="layout-coder-div">
          <span class="span-a">标准化实施</span>
          <hr/>
          <span class="span-b">专业团队，标准实施</span>
        </div>
      </el-card>
      <el-card id="card-c">
        <img class="layout-coder-img" src="../../assets/imgs/touming.png"/>
        <div class="layout-coder-div">
          <span class="span-a">个性开发</span>
          <hr/>
          <span class="span-b">个性需求，定制开发</span>
        </div>
      </el-card>
      <el-card id="card-d">
        <img class="layout-coder-img" src="../../assets/imgs/touming.png"/>
        <div class="layout-coder-div">
          <span class="span-a">运营维护</span>
          <hr/>
          <span class="span-b">7*24小时在线</span>
        </div>
      </el-card>
    </div>
    <h1>服务方式</h1>
    <p>服务没有起点，满意没有终点。优逸云人以追求产品高质量、服务高标准、客户高满意度为目标，竭诚为用户提供服务</p>
    <div class="layout-coders">
      <div class="layout-coders-card">
        <el-card class="layout-coders-card1">
          <h1>服务团队</h1>
          <span>专业实施、运维、服务团队，核心成员均有10年以上丰富的大健康行业咨询、实施、服务经验</span>
        </el-card>
        <el-card id="card1" class="layout-coders-card1"></el-card>
        <el-card class="layout-coders-card1">
          <h1>服务手段</h1>
          <span>现场服务+以互联网为依托的QQ、微信、专业远程工具等远程服务+400电话等线上线下相结合的形式</span>
        </el-card>
        <el-card id="card2" class="layout-coders-card1"></el-card>
      </div>
      <div class="layout-coders-card">
        <el-card id="card3" class="layout-coders-card1"></el-card>
        <el-card class="layout-coders-card1">
          <h1>服务时间</h1>
          <span>7*24小时不间断线上服务，365天保持手机呼入率</span>
        </el-card>
        <el-card id="card4" class="layout-coders-card1"></el-card>
        <el-card class="layout-coders-card1">
          <h1>服务流程</h1>
          <span>400电话呼入服务，呼叫中心转技术部派单，快速响应，售后电话确认，形成闭环</span>
        </el-card>
      </div>
    </div>
    <div class="layout-bottom">
      <p style="font-size: 30px">联系我们</p>
      <p>合作共赢，从这里开始</p>
      <el-button style="background-color: transparent; color: white; font-size: 18px; height: 50px;"
                 icon="el-icon-search" @click="dialogFormVisible = true">获取解决方案
      </el-button>
    </div>

    <el-dialog title="请填写您的信息" :visible.sync="dialogFormVisible">
      <span style="color: #666666; font-size: 12px;">亲爱的朋友，为更好的为您服务，请您填写以下信息或致电400-86-18580，我们的工作人员会尽快与您联系！</span>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="手机" prop="customerPhone">
          <el-input v-model="ruleForm.customerPhone"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="customerName">
          <el-input v-model="ruleForm.customerName"></el-input>
        </el-form-item>
        <el-form-item label="行业" prop="customerIndustry">
          <el-input v-model="ruleForm.customerIndustry"></el-input>
        </el-form-item>
        <el-form-item style="text-align: right">
          <el-button type="primary" @click="submitForm('ruleForm')">添加</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
          <el-button type="warning" @click="dialogFormVisible = false">返回</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>




  </div>
</template>

<script>
export default {
  name: "SupportView",
  data() {
    return {
      /*新增客户*/
      dialogFormVisible: false,
      ruleForm: {
        customerPhone: '',
        customerName: '',
        customerIndustry: '',
      },
      rules: {
        customerPhone: [
          {required: true, message: '请输入您的手机号', trigger: 'blur'},
          {pattern: /^1[34578]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur'}
        ],
        customerName: [
          {required: true, message: '请输入您的姓名', trigger: 'blur'},
          {min: 2, max: 25, message: '长度在 2 到 25 个字符', trigger: 'blur'}
        ],
        customerIndustry: [
          {required: true, message: '请输入您所在行业', trigger: 'blur'},
          {min: 2, max: 25, message: '长度在 2 到 25 个字符', trigger: 'blur'}
        ]
      },
      formLabelWidth: '100px'


    }
  },

  methods:{
    /*添加*/
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let url = 'http://localhost:8080/customer/insert';
          let jsonData = {
            customerPhone: this.ruleForm.customerPhone,
            customerName: this.ruleForm.customerName,
            customerIndustry: this.ruleForm.customerIndustry
          };
          this.axios({
            method: 'post',
            url: url,
            headers: { 'Content-Type': 'application/json' },
            data: JSON.stringify(jsonData)       //将参数转为json格式
          }).then((response) =>{
            let jsonResult = response.data;
            if (jsonResult.code == 200){
              this.$message({
                message:'提交成功!',
                type:'sucess'
              });
              this.resetForm(formName);
              this.dialogFormVisible = false;
            }else {
              this.$alert(jsonResult.message, '错误', {
                confirmButtonText: '确定',
                callback: action => {
                }
              });
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },

    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  }



}
</script>

<style scoped>
@keyframes enter {
  0% {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 0, 0);
    animation-timing-function: linear;
  }
  50% {
    opacity: 0.5;
    transform: scale3d(0.5, 0.5, 0.5) translate3d(0, 0, 0);
    animation-timing-function: linear;
  }
  100% {
    opacity: 1;
    transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
    animation-timing-function: linear;
  }
}

p{
  margin: 30px auto;
  color: white;
  font-size: 16px;
}
hr {
  border: none; /* 移除默认边框 */
  height: 1px; /* 设置分割线的高度 */
  background-color: #999999; /* 设置分割线的颜色 */
}
h1{
  font-size: 20px;
  margin: 20px auto;
}
span {
  font-size: 12px;
  line-height: 3; /* 设置行间距为1.5倍文本的高度 */
}
h1,span {
  color: white;
}
.layout-coder-div {
  position: absolute;
  top: 58%;
  left: 18%;
  width: 145px;
  height: 80px;
}
.span-a {
  font-size: 16px;
  color: #333333;
}
.span-b {
  font-size: 14px;
  color: #666666;
}
#card1 {
  background-image: url("../../assets/imgs/2.jpg");
  background-size: cover;
}
#card2 {
  background-image: url("../../assets/imgs/1.jpg");
  background-size: cover;
}
#card3 {
  background-image: url("../../assets/imgs/3.jpg");
  background-size: cover;
}
#card4 {
  background-image: url("../../assets/imgs/4.jpg");
  background-size: cover;
}
.layout-coders-card1 {
  width: 240px;
  height: 240px;
  border-radius: 100%;
  background-image: url("../../assets/imgs/5.jpg");
}
.layout-coders-card {
  display: flex;
}
.layout-bottom {
  background-image: url("../../assets/imgs/beij.jpg");
  margin: 0 auto;
  padding-top: 40px;
  height: 313px;
}
.layout-coders {
  margin: 40px auto;
  width: 960px;
  height: 480px;
}
.layout-coder > div {
  position: relative;
  float:left;
  margin: 0 5px;
  width: 231px;
  height: 100%;
  border-radius: 25px;
}
.layout-coder-img {
  margin-top: 80%;
}
#card-a {
  background-image: url("../../assets/imgs/a.png");
  animation: 1s linear 0s normal enter;
}
#card-b {
  background-image: url("../../assets/imgs/b.png");
  animation: 1s linear 0s normal enter;
}
#card-c {
  background-image: url("../../assets/imgs/c.png");
  animation: 1s linear 0s normal enter;
}
#card-d {
  background-image: url("../../assets/imgs/d.png");
  animation: 1s linear 0s normal enter;
}
.layout-coder {
  position: relative;
  margin: 0 auto;
  width: 974px;
  height: 300px;
}
.layout-body>h1 {
  margin: 80px 0 40px 0;
  font-size: 30px;
  color: #666666;
}
.layout-body>p {
  margin-bottom: 50px;
  color: #666666;
  font-size: 14px;
}

</style>